<template>
	<view class="container">
		<!-- 顶部状态栏与工具栏 -->
		<view class="header-toolbar">
			<view class="status-bar">
				<text>{{ editorStatus }}</text>
			</view>
			<!-- 格式化工具栏，只在非只读模式下显示 -->
			<view class="format-toolbar" v-if="!isReadOnly">
				<!-- 为了演示状态同步，我们给按钮绑定一个 active class -->
				<view :class="['tool-item', { active: formats.bold }]" @click="format('bold')">B</view>
				<view :class="['tool-item', { active: formats.italic }]" @click="format('italic')">I</view>
				<view :class="['tool-item', { active: formats.header === 'H2' }]" @click="format('header', 'H2')">H2</view>
				<view class="tool-item" @click="insertImage">
					<image class="tool-icon" src="/static/icon-image.png"></image>
					<!-- 建议使用图标 -->
				</view>
				<!-- ... 其他工具按钮 ... -->
			</view>
		</view>

		<!-- Editor 组件本体 -->
		<editor
			id="syncNoteEditor"
			class="editor-instance"
			:read-only="isReadOnly"
			placeholder="开始撰写你的笔记，记录每一个闪光的想法..."
			:show-img-size="true"
			:show-img-toolbar="true"
			:show-img-resize="true"
			@ready="onEditorReady"
			@focus="onEditorFocus"
			@blur="onEditorBlur"
			@input="onEditorInput"
			@statuschange="onStatusChange"
		></editor>

		<!-- 底部操作栏 -->
		<view class="footer-actions">
			<button size="mini" @click="toggleReadOnly">
				{{ isReadOnly ? '编辑模式' : '预览模式' }}
			</button>
			<button size="mini" type="primary" @click="saveContentManually">手动保存</button>
		</view>
	</view>
</template>

<script>
// JavaScript 逻辑部分与之前相同，这里为了完整性再次贴出
export default {
	data() {
		return {
			isReadOnly: false,
			editorStatus: '等待编辑...',
			editorCtx: null,
			documentId: null,
			// 新增：用于同步工具栏状态
			formats: {}
		};
	},
	onLoad(options) {
		this.documentId = options.id || null;
		if (this.documentId) {
			this.isReadOnly = true;
			this.editorStatus = '正在加载文档...';
		} else {
			this.isReadOnly = false;
			this.editorStatus = '新文档';
		}
	},
	methods: {
		onEditorReady() {
			uni
				.createSelectorQuery()
				.select('#syncNoteEditor')
				.context((res) => {
					this.editorCtx = res.context;
					if (this.documentId) {
						this.loadInitialContent();
					}
				})
				.exec();
		},
		loadInitialContent() {
			const mockApiData = {
				delta: { ops: [{ insert: '这是从服务器加载的' }, { attributes: { bold: true }, insert: '加粗' }, { insert: '的初始内容。\n' }] }
			};
			this.editorCtx.setContents({
				delta: mockApiData.delta,
				success: () => (this.editorStatus = '文档加载完毕，当前为预览模式')
			});
		},
		onEditorFocus(e) {
			if (!this.isReadOnly) this.editorStatus = '正在输入...';
		},
		onEditorBlur(e) {
			if (!this.isReadOnly) this.editorStatus = '已自动保存';
		},
		onEditorInput(e) {
			this.editorStatus = '正在保存...';
			// 实际项目中使用防抖
			setTimeout(() => {
				if (this.editorStatus === '正在保存...') this.editorStatus = '已自动保存';
			}, 1000);
		},
		onStatusChange(e) {
			this.formats = e.detail;
			console.log('样式状态改变', this.formats);
		},
		toggleReadOnly() {
			this.isReadOnly = !this.isReadOnly;
			this.editorStatus = this.isReadOnly ? '预览模式' : '编辑模式';
			// 清空样式状态，防止模式切换后按钮状态不正确
			if (this.isReadOnly) {
				this.formats = {};
			}
		},
		format(name, value) {
			if (!this.editorCtx || this.isReadOnly) return;
			this.editorCtx.format(name, value);
		},
		insertImage() {
			if (!this.editorCtx || this.isReadOnly) return;
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.editorCtx.insertImage({
						src: res.tempFilePaths[0],
						alt: '图片描述',
						success: () => console.log('图片插入成功')
					});
				}
			});
		},
		saveContentManually() {
			if (!this.editorCtx) return;
			this.editorCtx.getContents({
				success: (res) => {
					console.log('手动保存内容:', res.delta);
					uni.showToast({ title: '保存成功！' });
					this.editorStatus = '手动保存成功';
				}
			});
		}
	}
};
</script>

<style scoped>
/* 使用 scoped 来确保样式只作用于当前组件 */

/* 整体布局 */
.container {
	display: flex;
	flex-direction: column;
	height: 100vh; /* 使容器占满整个屏幕高度 */
	background-color: #f9f9f9;
}

/* 头部区域 */
.header-toolbar {
	padding: 10px;
	border-bottom: 1px solid #e0e0e0;
	background-color: #ffffff;
}

.status-bar {
	font-size: 12px;
	color: #999;
	text-align: right;
	margin-bottom: 8px;
	height: 15px;
}

/* 格式化工具栏 */
.format-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px; /* 替代 margin，提供更现代的间距控制 */
}

.tool-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-weight: bold;
	font-size: 16px;
	color: #333;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.tool-item:hover {
	background-color: #efefef;
}
/* 工具栏按钮激活状态 */
.tool-item.active {
	background-color: #e0e0e0;
	border-color: #ccc;
}
.tool-icon {
	width: 20px;
	height: 20px;
}

/* 编辑器实例 */
.editor-instance {
	flex: 1; /* 关键：让编辑器区域填满剩余空间 */
	width: 100%;
	padding: 15px;
	box-sizing: border-box; /* 内边距不会撑开盒子 */
	background-color: #ffffff;
}

/* 底部操作区 */
.footer-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-top: 1px solid #e0e0e0;
	background-color: #ffffff;
}

/* 深度作用选择器，用于设置编辑器内部内容的样式 */
/* 注意：在不同预处理器中写法可能为 ::v-deep 或 /deep/ */
/deep/ .ql-editor {
	line-height: 1.6;
}
/deep/ .ql-editor h1 {
	font-size: 2em;
	margin: 0.67em 0;
	font-weight: bold;
}
/deep/ .ql-editor h2 {
	font-size: 1.5em;
	margin: 0.83em 0;
	font-weight: bold;
}
/deep/ .ql-editor p {
	margin: 1em 0;
}
/deep/ .ql-editor img {
	max-width: 100%; /* 图片自适应宽度 */
	display: block;
	margin: 10px 0;
}
/deep/ .ql-editor ul,
/deep/ .ql-editor ol {
	padding-left: 2em;
}
</style>
